<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref, getCurrentInstance } from 'vue'
	import { useUserStore } from '@/store/user'
	import { getDictType, addDeclarationBanquet } from '@/api/report'
	const instance = getCurrentInstance().proxy
	
	const user = useUserStore()
	const loading = ref(false)
	let info = {}
	const uForm = ref(null)
	const form = ref({
		fuel: undefined,
		waterType: undefined,
		disinfectionMethod: undefined,
		sample: '有',
		ifInjurant: '无',
		cabinetNumber: 1,
		fridgeNumber: 2,
		trashNumber: 1,
		facilityNumber: 1,
		basinNumber: 6
	})
	const rules = ref({
		fuel: [
			{type: 'number', required: true, message: '请选择燃料安全', trigger: 'change'}
		],
		waterType: [
			{type: 'number', required: true, message: '请选择水源', trigger: 'change'}
		],
		disinfectionMethod: [
			{type: 'number', required: true, message: '请选择餐具消毒方式', trigger: 'change'}
		],
		sample: [
			{required: true, message: '请选择留样设施', trigger: 'change'}
		],
		ifInjurant: [
			{required: true, message: '请选择有毒有害物品', trigger: 'change'}
		],
		cabinetNumber: [
			{type: 'number', required: true, message: '请选择餐具保洁柜数量', trigger: ['blur', 'change']}
		],
		fridgeNumber: [
			{type: 'number', required: true, message: '请输入冰箱数量', trigger: ['blur', 'change']}
		],
		trashNumber: [
			{type: 'number', required: true, message: '请选择垃圾桶数量', trigger: ['blur', 'change']}
		],
		facilityNumber: [
			{type: 'number', required: true, message: '请选择防鼠、防蝇、防尘设施数量', trigger: ['blur', 'change']}
		],
		basinNumber: [
			{type: 'number', required: true, message: '请选择专业洗菜、肉、鱼盆数量', trigger: ['blur', 'change']}
		]
	})
	const fuelList = ref([])
	const waterList = ref([])
	const disinfectionList = ref([])
	
	function handleType() {
		getDictType('apply_fuel_types').then(res => {
			form.value.fuel = 0
			fuelList.value = res.result || []
		})
		getDictType('apply_water_types').then(res => {
			form.value.waterType = 0
			waterList.value = res.result || []
		})
		getDictType('apply_disinfection_types').then(res => {
			form.value.disinfectionMethod = 0
			disinfectionList.value = res.result || []
		})
	}
	function fuelChange(e) {
		let index = e.detail.value
		form.value.fuel = index
		uForm.value.validateField('fuel')
	}
	function waterChange(e) {
		let index = e.detail.value
		form.value.waterType = index
		uForm.value.validateField('waterType')
	}
	function disinfectionChange(e) {
		let index = e.detail.value
		form.value.disinfectionMethod = index
		uForm.value.validateField('disinfectionMethod')
	}
	function submit() {
		uForm.value.validate().then(() => {
			let params = uni.$uv.deepClone(form.value)
			Object.assign(params, info)
			params.fuel = fuelList.value[form.value.fuel].value
			params.waterType = waterList.value[form.value.waterType].value
			params.disinfectionMethod = disinfectionList.value[form.value.disinfectionMethod].value
			addDeclarationBanquet(params).then(response => {
				uni.showToast({
					icon: 'success',
					title: '保存成功'
				})
				let params = response.result || {}
				setTimeout(() => {
					uni.reLaunch({
						url: `/pages/Organizers/declaration/banquet/declareSuccess?code=${params.code}&sponsorName=${params.sponsorName}`,
					})
				}, 1000)
			}).catch(() => loading.value = false)
		})
	}
	
	onLoad(() => {
		const eventChannel = instance.getOpenerEventChannel()
		eventChannel.on('info', form => {
			info = form || {}
		})
		handleType()
	})
</script>

<template>
	<view :class="['app-container', user.theme]">
		<view class="steps-box">
			<view class="steps-item">
				<view class="item-img active">
					<uv-icon name="/static/images/declare/base_.png" :size="user.theme? 40 : 32"></uv-icon>
				</view>
				<text>基础信息</text>
			</view>
			<view class="steps-line active"></view>
			<view class="steps-item">
				<view class="item-img active">
					<uv-icon name="/static/images/declare/helper_.png" :size="user.theme? 40 : 32"></uv-icon>
				</view>
				<text>帮厨信息</text>
			</view>
			<view class="steps-line active"></view>
			<view class="steps-item">
				<view class="item-img active">
					<uv-icon name="/static/images/declare/other_.png" :size="user.theme? 40 : 32"></uv-icon>
				</view>
				<text>其他信息</text>
			</view>
		</view>
		<uv-form :model="form" :rules="rules" ref="uForm" labelWidth="auto">
			<view class="form-box">
				<uv-form-item label="燃料安全" prop="fuel" required borderBottom>
					<picker @change="fuelChange" :value="form.fuel" :range="fuelList" range-key="dictLabel">
						<view class="custom-content">
							<text :class="form.fuel === undefined? 'text-no' : ''">
								{{form.fuel === undefined? '请选择燃料安全' : fuelList[form.fuel].dictLabel}}
							</text>
							<uv-icon name="arrow-right" color="#54504D" size="30" />
						</view>
					</picker>
				</uv-form-item>
				<uv-form-item label="水源" prop="waterType" required borderBottom>
					<picker @change="waterChange" :value="form.waterType" :range="waterList" range-key="dictLabel">
						<view class="custom-content">
							<text :class="form.waterType === undefined? 'text-no' : ''">
								{{form.waterType === undefined? '请选择水源' : waterList[form.waterType].dictLabel}}
							</text>
							<uv-icon name="arrow-right" color="#54504D" size="30" />
						</view>
					</picker>
				</uv-form-item>
				<uv-form-item label="餐具消毒方式" prop="disinfectionMethod" required borderBottom>
					<picker @change="disinfectionChange" :value="form.disinfectionMethod" :range="disinfectionList" range-key="dictLabel">
						<view class="custom-content">
							<text :class="form.disinfectionMethod === undefined? 'text-no' : ''">
								{{form.disinfectionMethod === undefined? '请选择餐具消毒方式' : disinfectionList[form.disinfectionMethod].dictLabel}}
							</text>
							<uv-icon name="arrow-right" color="#54504D" size="30" />
						</view>
					</picker>
				</uv-form-item>
				<uv-form-item label="留样设施" prop="sample" required borderBottom>
					<uv-radio-group v-model="form.sample" :size="user.theme? 40 : 30" :iconSize="user.theme? 30 : 22" :labelSize="user.theme? 32 : 28">
						<view class="custom-content radio-group">
							<uv-radio label="有" name="有"></uv-radio>
							<uv-radio label="无" name="无"></uv-radio>
						</view>
					</uv-radio-group>
				</uv-form-item>
				<uv-form-item label="有毒有害物品" prop="ifInjurant" required borderBottom>
					<uv-radio-group v-model="form.ifInjurant" :size="user.theme? 40 : 30" :iconSize="user.theme? 30 : 22" :labelSize="user.theme? 32 : 28">
						<view class="custom-content radio-group">
							<uv-radio label="有" name="有"></uv-radio>
							<uv-radio label="无" name="无"></uv-radio>
						</view>
					</uv-radio-group>
				</uv-form-item>
				<uv-form-item label="餐具保洁柜数量" prop="cabinetNumber" required borderBottom>
					<view class="custom-content">
						<uv-number-box v-model="form.cabinetNumber" inputWidth="94" integer bgColor="#FFFFFF" max="10">
							<template v-slot:minus>
								<view class="operate-box">
									<uv-icon name="minus" color="#999999" size="24" bold></uv-icon>
								</view>
							</template>
							<template v-slot:plus>
								<view class="operate-box plus">
									<uv-icon name="plus" color="#FFFFFF" size="24" bold></uv-icon>
								</view>
							</template>
						</uv-number-box>
					</view>
				</uv-form-item>
				<uv-form-item label="冰箱数量" prop="fridgeNumber" required borderBottom>
					<view class="custom-content">
						<uv-number-box v-model="form.fridgeNumber" inputWidth="94" integer bgColor="#FFFFFF" max="10">
							<template v-slot:minus>
								<view class="operate-box">
									<uv-icon name="minus" color="#999999" size="24" bold></uv-icon>
								</view>
							</template>
							<template v-slot:plus>
								<view class="operate-box plus">
									<uv-icon name="plus" color="#FFFFFF" size="24" bold></uv-icon>
								</view>
							</template>
						</uv-number-box>
					</view>
				</uv-form-item>
				<uv-form-item label="垃圾桶数量" prop="trashNumber" required borderBottom>
					<view class="custom-content">
						<uv-number-box v-model="form.trashNumber" inputWidth="94" integer bgColor="#FFFFFF" max="10">
							<template v-slot:minus>
								<view class="operate-box">
									<uv-icon name="minus" color="#999999" size="24" bold></uv-icon>
								</view>
							</template>
							<template v-slot:plus>
								<view class="operate-box plus">
									<uv-icon name="plus" color="#FFFFFF" size="24" bold></uv-icon>
								</view>
							</template>
						</uv-number-box>
					</view>
				</uv-form-item>
				<uv-form-item label="防鼠、防蝇、防尘设施数量" prop="facilityNumber" required borderBottom>
					<view class="custom-content">
						<uv-number-box v-model="form.facilityNumber" inputWidth="94" integer bgColor="#FFFFFF" max="10">
							<template v-slot:minus>
								<view class="operate-box">
									<uv-icon name="minus" color="#999999" size="24" bold></uv-icon>
								</view>
							</template>
							<template v-slot:plus>
								<view class="operate-box plus">
									<uv-icon name="plus" color="#FFFFFF" size="24" bold></uv-icon>
								</view>
							</template>
						</uv-number-box>
					</view>
				</uv-form-item>
				<uv-form-item label="专业洗菜、肉、鱼盆数量" prop="basinNumber" required>
					<view class="custom-content">
						<uv-number-box v-model="form.basinNumber" inputWidth="94" integer bgColor="#FFFFFF" max="10">
							<template v-slot:minus>
								<view class="operate-box">
									<uv-icon name="minus" color="#999999" size="24" bold></uv-icon>
								</view>
							</template>
							<template v-slot:plus>
								<view class="operate-box plus">
									<uv-icon name="plus" color="#FFFFFF" size="24" bold></uv-icon>
								</view>
							</template>
						</uv-number-box>
					</view>
				</uv-form-item>
			</view>
		</uv-form>
		<view class="form-bottom">
			<uv-button type="primary" shape="circle" text="提交" :custom-style="{height: '84rpx'}" @click="submit" :disabled="loading"></uv-button>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		padding-bottom: 164rpx;
		.steps-box{
			padding-top: 24rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 40rpx;
			.steps-item{
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 8rpx;
				.item-img{
					width: 56rpx;
					height: 56rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #E9EAEE;
					border-radius: 50%;
					&.active{
						background-color: $uv-primary;
					}
				}
			}
			.steps-line{
				width: 64rpx;
				height: 4rpx;
				background-color: #D7D8D9;
				&.active{
					background-color: $uv-primary;
				}
			}
		}
		.form-box{
			margin-top: 24rpx;
			background-color: #fff;
			padding: 0 32rpx;
			.custom-content{
				display: flex;
				justify-content: flex-end;
				gap: 10rpx;
			}
			.radio-group{
				width: 100%;
				gap: 66rpx;
			}
			.text-disable{
				color: #727687;
			}
			.text-no{
				color: #c0c4cc;
			}
			::v-deep .uv-form-item__body{
				padding: 32rpx 0;
			}
			::v-deep .uv-form-item__body__left__content__required{
				left: unset;
				right: -8rpx;
			}
			::v-deep .uv-form-item__body__left__content__label {
				font-size: var(--theme-df);
			}
			::v-deep .uv-input__content__field-wrapper__field {
				font-size: var(--theme-df) !important;
				line-height: var(--theme-df-line) !important;
			}
			::v-deep .uv-form-item__body__right__message{
				font-size: var(--theme-sm);
				line-height: var(--theme-sm-line);
			}
			::v-deep .uv-form-item__body__right__content{
				font-size: var(--theme-df) !important;
				line-height: var(--theme-df-line) !important;
			}
			.operate-box{
				width: 44rpx;
				height: 44rpx;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #E6E6E6;
				&.plus{
					background-color: $uv-primary;
				}
			}
		}
		.form-bottom{
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0rpx;
			z-index: 100;
			height: 132rpx;
			padding: 24rpx 40rpx;
			background-color: #FFFFFF;
			box-shadow: 0rpx -8rpx 8rpx 0rpx rgba(0,0,0,0.04);
			::v-deep .uv-button__text{
				font-size: var(--theme-lg) !important;
			}
		}
		&.large{
			.item-img{
				width: 64rpx;
				height: 64rpx;
			}
		}
	}
</style>